<template>
  <div>
    <div style="margin: 15px">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div @click="out"><i class="el-icon-arrow-left"></i></div>
    <div class="box">
      <el-form ref="form" :model="obj">
        <el-form-item label="*商品名称:">
          <el-input v-model="obj.product"></el-input>
        </el-form-item>
        <el-form-item label="*简略标题:">
          <el-input v-model="obj.date"></el-input>
        </el-form-item>
      </el-form>
      <div class="mini">
        <div class="mini_input">
          <span>排序 :</span>
          <el-input v-model="obj.sort" placeholder="请输入内容"></el-input>
        </div>
        <div class="mini_input">
          <span>库存 :</span>
          <el-input v-model="obj.inventory" placeholder="请输入内容"></el-input>
        </div>
        <div class="mini_input">
          <span>分类:</span>
          <select class="select">
            <option value="volvo"></option>
            <option value="saab">肚子疼</option>
            <option value="opel">头疼</option>
            <option value="audi">脑袋疼</option>
          </select>
        </div>
      </div>
      <div class="mini">
        <div class="mini_input">
          <span>*净含量 :</span>
          <el-input v-model="obj.pure" placeholder="请输入内容"></el-input>
        </div>
        <div class="mini_input">
          <span>品 牌 :</span>
          <el-input v-model="obj.brand" placeholder="请输入内容"></el-input>
        </div>
      </div>
      <el-form ref="obj" :model="obj">
        <el-form-item label="*关 键 词  :">
          <el-input v-model="obj.keyword"></el-input>
        </el-form-item>
      </el-form>
      <el-form ref="obj" :model="obj">
        <el-form-item label="*药品功效:">
          <el-input v-model="obj.Drug_function"></el-input>
        </el-form-item>
      </el-form>
      <div class="mini">
        <div class="mini_input">
          <span>药品价格 :</span>
          <el-input v-model="obj.unit_price" placeholder="请输入内容"></el-input>
        </div>
        <div class="mini_input">
          <span>原价 :</span>
          <el-input v-model="obj.original_cost" placeholder="请输入内容"></el-input>
        </div>
        <div class="mini_input">
          <span>成本价 :</span>
          <el-input v-model="obj.cost_price" placeholder="请输入内容"></el-input>
        </div>
      </div>
      <div class="sold_out">
        <div class="sold_input">
          <span>已售出数量 :</span>
          <el-input v-model="obj.monthly_sales" placeholder="请输入内容"></el-input>
          <button>件</button>
        </div>
      </div>
      <div class="up">
        <span> 图片上传:</span>
        <div v-show="up_image" class="box_image">
          <i class="el-icon-close" @click="delimg"></i>
          <img class="image" :src="obj.product_image" alt="" />
        </div>
        <el-upload action="http://127.0.0.1:7001/api/loadimg" list-type="picture-card" :on-success="handleAvatarSuccess">
          <!-- <div> {{}} </div> -->
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>
      <div class="mini">
        <div class="mini_input">
          <span>规格 :</span>
          <el-input v-model="obj.specification" placeholder="请输入内容"></el-input>
        </div>
        <div class="mini_input">
          <span>分类:</span>
          <select class="select">
            <option value="volvo"></option>
            <option value="saab">百度</option>
            <option value="opel">腾讯</option>
            <option value="audi">新浪</option>
          </select>
        </div>
      </div>
      <div>
        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="obj.result"> </el-input>
      </div>
      <div class="botton">
        <el-button type="primary" @click="uploading" icon="el-icon-search">保存并且上传</el-button>
        <el-button type="primary" @click="repertory" icon="el-icon-search">保存并且库存</el-button>
        <el-button type="primary" @click="out">取消</el-button>
      </div>
    </div>
    <div></div>
  </div>
</template>
<script>
import { lwjgetShopList_Put, lwjgetShopList_get } from '../../../api/index'
export default {
  data() {
    return {
      obj: {},
      up_image: true,
      uid: 1,
    }
  },
  methods: {
    delimg() {
      this.product_image = ''
      this.up_image = false
    },
    uploading() {
      //保存并且上传
      if (this.obj.date == '' || this.obj.date == '') {
        this.$alert('产品名字不能为空', '产品', {
          confirmButtonText: '确定',
          callback: (action) => {
            this.$message({
              type: 'info',
              message: `action: ${action}`,
            })
          },
        })
      } else if (this.obj.keyword == '' || this.obj.Drug_function == '') {
        this.$alert('产品内容不能为空!', '产品内容', {
          confirmButtonText: '确定',
          callback: (action) => {
            this.$message({
              type: 'info',
              message: `action: ${action}`,
            })
          },
        })
      } else {
        const arr = {
          id: this.uid,
          product: this.obj.product,
          date: this.obj.date,
          Drug_function: this.obj.Drug_function,
          keyword: this.obj.keyword,
          pure: this.obj.pure,
          brand: this.obj.brand,
          unit_price: this.obj.unit_price,
          original_cost: this.obj.original_cost,
          input_cbenjia: this.obj.input_cbenjia,
          monthly_sales: this.obj.monthly_sales,
          product_image: this.obj.product_image,
          specification: this.obj.specification,
          result: this.obj.result,
          inventory: this.obj.inventory,
          state: (this.obj.state = 1),
        }
        lwjgetShopList_Put(arr).then((res) => {
          console.log(res)
        })
        this.$alert('保存并且上传', '保存或者上传', {
          confirmButtonText: '确定',
          callback: (action) => {
            this.$message({
              type: 'info',
              message: `action: ${action}`,
            })
          },
        })
        this.$router.push('/shop')
      }
    },
    repertory() {
      //保存并且库存
      if (this.obj.date == '' || this.obj.date == '') {
        this.$alert('产品名字不能为空', '产品', {
          confirmButtonText: '确定',
          callback: (action) => {
            this.$message({
              type: 'info',
              message: `action: ${action}`,
            })
          },
        })
      } else if (this.obj.keyword == '' || this.obj.Drug_function == '') {
        this.$alert('产品内容不能为空', '产品内容', {
          confirmButtonText: '确定',
          callback: (action) => {
            this.$message({
              type: 'info',
              message: `action: ${action}`,
            })
          },
        })
      } else {
        const arr = {
          id: this.uid,
          product: this.obj.product,
          date: this.obj.date,
          Drug_function: this.obj.Drug_function,
          keyword: this.obj.keyword,
          pure: this.obj.pure,
          brand: this.obj.brand,
          unit_price: this.obj.unit_price,
          original_cost: this.obj.original_cost,
          input_cbenjia: this.obj.input_cbenjia,
          monthly_sales: this.obj.monthly_sales,
          product_image: this.obj.product_image,
          specification: this.obj.specification,
          result: this.obj.result,
          state: (this.obj.state = 3),
        }
        lwjgetShopList_Put(arr).then((res) => {
          console.log(res)
        })
        this.$alert('保存并且库存', '库存', {
          confirmButtonText: '确定',
          callback: (action) => {
            this.$message({
              type: 'info',
              message: `action: ${action}`,
            })
          },
        })
        this.$router.push('/shop')
      }
    },
    out() {
      this.$router.push('/shop')
    },
    handleAvatarSuccess(res, file) {
      console.log(res, file)
      this.obj.product_image = `http://127.0.0.1:7001${res.data}`
    },
  },
  components: {},
  created() {
    lwjgetShopList_get({ id: this.$route.params.id }).then((res) => {
      this.uid = this.$route.params.id
      console.log(res)
      this.obj = res.data
      console.log(this.obj)
    })
    if (this.$route.params.id == undefined) {
      this.$router.push('/shop')
    }
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-icon-arrow-left {
  font-size: 30px;
}
::v-deep .el-form-item__label {
  font-size: 12px;
}

::v-deep .el-input__inner {
  height: 30px;
  width: 100%;
}

::v-deep .el-form-item {
  height: 30px;
  width: 100%;
}

::v-deep .el-input {
  width: 70%;
}

.box_image {
  display: flex;
  flex-direction: row-reverse;

  .image {
    width: 120px;
    height: auto;
  }
}

.box {
  width: 90%;
  // height: 800px;
  margin: 0 auto;
  padding: 10px;
  // border: 1px red solid;

  .mini {
    width: 95%;
    height: 30px;
    // border: 1px red solid;
    margin: 10px;
    display: flex;

    .mini_input {
      width: 230px;
      height: auto;
      display: flex;
      align-items: center;
      justify-content: space-around;

      span {
        font-size: 12px;
      }

      .select {
        width: 60%;
        border: none;
        height: 30px;
      }
    }
  }

  .sold_out {
    width: 95%;
    height: 30px;
    // border: 1px red solid;
    margin: 10px;
    display: flex;

    .sold_input {
      width: 350px;
      height: auto;
      display: flex;
      align-items: center;
      justify-content: space-around;

      span {
        font-size: 12px;
      }

      button {
        background-color: white;
        padding: 5px;
        border: 1px #eaeaea solid;
      }
    }
  }

  .up {
    width: 100%;
    height: 200px;
    display: flex;
    font-size: 12px;
    // border: 1px lightblue solid;

    span {
      margin: 8px;
    }
  }

  .botton {
    margin: 20px 0 0 0px;
  }
}
</style>
